<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0;margin:0}
        body{
            overflow: hidden;
        }
        .nav-wrap{
            width: 100%;
            padding-top: 100px;
            background-color: dodgerblue;
            display: flex;
            overflow: hidden;
        }
        .nav-item{
            flex: 1;
            width: 33.333%;
            color: white;
            text-align: center;
            height: 48px;
            border-radius: 24px;
            overflow: hidden;
            line-height: 48px;
            position: relative;
            font-weight: 600;
            z-index: 20;
        }
        .nav-item::after{
            content: '';
            position: absolute;
            display: block;
            /* width: 150%; */
            left: -70px;
            right: -70px;
            bottom: 0;
            background-color: dodgerblue;
            z-index: 2;
            height: 24px;
        } 
        .nav-item span{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 2px;
            z-index: 10;
            border-radius: 24px;
            
        }
        .nav-item:active span{
            box-shadow: 0px 3px 2px 0px #dddddd;
        }
        .nav-item:active{
            color: dodgerblue;
            background-color: white;
            z-index: 10;
            overflow: visible;
        }
        .nav-item:active::after{
            content: '';
            position: absolute;
            display: block;
            left: -70px;
            right: -70px;
            bottom: 0;
            background-color: white;
            z-index: 1;
            height: 24px;
        } 

    </style>
</head>
<body>
    <div class="nav-wrap">
        <div class="nav-item"><span>标题一</span></div>
        <div class="nav-item"><span>标题二</span></div>
        <div class="nav-item"><span>标题三</span></div>
    </div>
    <div class="content"></div>
    <script>
        function promisify(f) {
            return function (...args) { // 返回一个包装函数（wrapper-function）
                return new Promise((resolve, reject) => {
                    function callback(err, result) { // 我们对 f 的自定义的回调
                        if (err) {
                        reject(err);
                        } else {
                        resolve(result);
                        }
                    }
                    args.push(callback); // 将我们的自定义的回调附加到 f 参数（arguments）的末尾
                    f.call(this, ...args); // 调用原始的函数
                });
            };
        };

        // 用法：
        let loadScriptPromise = promisify(loadScript);
        loadScriptPromise().then();
    </script>
</body>
</html>